<!-- 分类按钮 -->
<template>
  <div class="category-filter">
    <h2 class="category-title">热门分类</h2>
    <el-button
      @click="select_category(item)"
      class="category-btn"
      v-for="(item, index) in category_list"
      :key="index"
      >{{ item.category }}
    </el-button>
    <el-button class="category-btn add-category-btn" @click="addCategory"
      >编辑分类</el-button
    >
    <New_category
      v-if="showNewCategory"
      :visible.sync="showNewCategory"
      @created="handleCategoryCreated"
    ></New_category>
  </div>
</template>

<script>
import { get_category_list } from "@/api/home/nav";
import New_category from "@/views/home/homePage/New_category.vue";

export default {
  name: "CategoryFilter",
  components: {
    New_category,
  },
  data() {
    return {
      category_list: [],
      nav_value_list: [],
      showNewCategory: false,
      current_category_id: null,
    };
  },
  created() {
    console.log(this.showNewCategory);
    this.getCategoryList();
  },
  methods: {
    async getCategoryList() {
      const res = await get_category_list();
      this.category_list = res.data;
    },
    async handleCategoryCreated() {
      await this.getCategoryList();
    },
    addCategory() {
      this.showNewCategory = true;
      console.log(this.showNewCategory);
    },
    async select_category(item) {
      console.log("这个item.id是啥", item.id);
      this.current_category_id = item.id; // 记录当前选择的分类id
      this.$emit("category_id", item.id);
    },
  },
};
</script>
<style lang="scss" scoped>
.category-filter {
  margin-bottom: 32px;
}
.category-title {
  margin-bottom: 16px;
}

.category-btn {
  border-radius: 50px;
  position: relative;
}

.delete-icon:hover {
  color: #f56c6c;
}

.add-category-btn {
  color: #409eff;
}
</style>
